<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>
         - seventeenw的博客
      </title>
    <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  
  <meta name="theme-color" content="#000000" />
  
  <meta http-equiv="window-target" content="_top" />
  
  
  <meta name="description" content="安装ionci环境：
npm install -g @ionic/cli  查看ionic版本：
ionic -v  新建app项目：
ionic start myionictest blank（空项目） ionic start myionictest tabs（带导航条） ionic start myionictest sidemenu（带侧滑菜单）  启动app：
cd myApp ionic serve  创建：
ionic g page YourPageName //创建新页面 ionic g directive YourPageName //创建指令 ionic g component YourComponentName //创建组件 ionic g provider YourProviderName //创建服务 ionic g pipe YourPipeName //创建过滤器  在指定目录下创建
ionic g page [newPageName] --pagesDir [dirName]　例：ionic g page setting --pagesDir src/pages/about  后续操作：" />
  <meta name="generator" content="Hugo 0.59.1 with theme pure" />
  <title> - seventeenw的博客</title>
  

  <link rel="stylesheet" href="https://seventeenw.gitee.io/blogs/css/style.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/9.15.10/styles/github.min.css">
  <meta property="og:title" content="" />
<meta property="og:description" content="安装ionci环境：
npm install -g @ionic/cli  查看ionic版本：
ionic -v  新建app项目：
ionic start myionictest blank（空项目） ionic start myionictest tabs（带导航条） ionic start myionictest sidemenu（带侧滑菜单）  启动app：
cd myApp ionic serve  创建：
ionic g page YourPageName //创建新页面 ionic g directive YourPageName //创建指令 ionic g component YourComponentName //创建组件 ionic g provider YourProviderName //创建服务 ionic g pipe YourPipeName //创建过滤器  在指定目录下创建
ionic g page [newPageName] --pagesDir [dirName]　例：ionic g page setting --pagesDir src/pages/about  后续操作：" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://seventeenw.gitee.io/blogs/1/01/%E5%89%8D%E7%AB%AFangular-ionic%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/" />

<meta itemprop="name" content="">
<meta itemprop="description" content="安装ionci环境：
npm install -g @ionic/cli  查看ionic版本：
ionic -v  新建app项目：
ionic start myionictest blank（空项目） ionic start myionictest tabs（带导航条） ionic start myionictest sidemenu（带侧滑菜单）  启动app：
cd myApp ionic serve  创建：
ionic g page YourPageName //创建新页面 ionic g directive YourPageName //创建指令 ionic g component YourComponentName //创建组件 ionic g provider YourProviderName //创建服务 ionic g pipe YourPipeName //创建过滤器  在指定目录下创建
ionic g page [newPageName] --pagesDir [dirName]　例：ionic g page setting --pagesDir src/pages/about  后续操作：">



<meta itemprop="wordCount" content="285">



<meta itemprop="keywords" content="" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content=""/>
<meta name="twitter:description" content="安装ionci环境：
npm install -g @ionic/cli  查看ionic版本：
ionic -v  新建app项目：
ionic start myionictest blank（空项目） ionic start myionictest tabs（带导航条） ionic start myionictest sidemenu（带侧滑菜单）  启动app：
cd myApp ionic serve  创建：
ionic g page YourPageName //创建新页面 ionic g directive YourPageName //创建指令 ionic g component YourComponentName //创建组件 ionic g provider YourProviderName //创建服务 ionic g pipe YourPipeName //创建过滤器  在指定目录下创建
ionic g page [newPageName] --pagesDir [dirName]　例：ionic g page setting --pagesDir src/pages/about  后续操作："/>

  <!--[if lte IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
    <![endif]-->

  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

</head>
  </head>
  <body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage"><header class="header" itemscope itemtype="http://schema.org/WPHeader">
    <div class="slimContent">
      <div class="navbar-header">
        <div class="profile-block text-center">
          <a id="avatar" href="https://github.com/wengshiquan" target="_blank">
            <img class="img-circle img-rotate" src="https://seventeenw.gitee.io/blogs/avatar.png" width="200" height="200">
          </a>
          <h2 id="name" class="hidden-xs hidden-sm">17Null</h2>
          <h3 id="title" class="hidden-xs hidden-sm hidden-md">Java Developer</h3>
          <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i>Fuzhou, China</small>
        </div><div class="search" id="search-form-wrap">
    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i
                        class="icon icon-search"></i></button>
            </span>
        </div>
        <div class="ins-search">
            <div class="ins-search-mask"></div>
            <div class="ins-search-container">
                <div class="ins-input-wrapper">
                    <input type="text" class="ins-search-input" placeholder="想要查找什么..."
                        x-webkit-speech />
                    <button type="button" class="close ins-close ins-selectable" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="ins-section-wrapper">
                    <div class="ins-section-container"></div>
                </div>
            </div>
        </div>
    </form>
</div>
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
        <ul class="nav navbar-nav main-nav">
            <li class="menu-item menu-item-home">
                <a href="/blogs/">
                    <i class="icon icon-home-fill"></i>
                  <span class="menu-title">主页</span>
                </a>
            </li>
            <li class="menu-item menu-item-reprint">
                <a href="/blogs/reprint">
                    <i class="icon icon-star-fill"></i>
                  <span class="menu-title">转载</span>
                </a>
            </li>
            <li class="menu-item menu-item-about">
                <a href="/blogs/about">
                    <i class="icon icon-cup-fill"></i>
                  <span class="menu-title">关于</span>
                </a>
            </li>
        </ul>
      </nav>
    </div>
  </header>
  <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content"><p>一直想做前端的java程序员~</p>
            </div>
        </div>
    </div>
</div>

      <div class="widget">
    <h3 class="widget-title"> 分类</h3>
    <div class="widget-body">
        <ul class="category-list">
        </ul>
    </div>
</div>
      <div class="widget">
    <h3 class="widget-title"> 标签</h3>
    <div class="widget-body">
        <ul class="tag-list">
            
        </ul>

    </div>
</div>
      
<div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
        <ul class="recent-post-list list-unstyled no-thumbnail">
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://seventeenw.gitee.io/blogs/2020/06/vue-element-template-%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E7%9A%84%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B/" class="title">vue-element-template 从零开始的开发流程</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-06-25 22:51:58 &#43;0800 CST" itemprop="datePublished">2020-06-25</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://seventeenw.gitee.io/blogs/2020/06/vue-element-template-%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E7%9A%84%E5%BC%80%E5%8F%91%E6%97%A5%E5%BF%97/" class="title">vue-element-template 从零开始的开发日志</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-06-25 22:49:21 &#43;0800 CST" itemprop="datePublished">2020-06-25</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://seventeenw.gitee.io/blogs/2020/06/idea-springboot%E5%9B%BE%E6%A0%87%E4%B8%8D%E6%AD%A3%E7%A1%AE/" class="title">IDEA Springboot图标不正确</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-06-25 15:06:28 &#43;0800 CST" itemprop="datePublished">2020-06-25</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://seventeenw.gitee.io/blogs/2020/06/%E6%A0%B9%E6%8D%AE%E6%95%B0%E6%8D%AE%E5%BA%93%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90%E5%AE%9E%E4%BD%93%E7%B1%BB%E7%AD%89%E6%96%87%E4%BB%B6/" class="title">根据数据库自动生成实体类等文件</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-06-10 11:07:41 &#43;0800 CST" itemprop="datePublished">2020-06-10</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://seventeenw.gitee.io/blogs/2020/06/springboot-quartz%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1%E8%A7%A3%E5%86%B3%E6%97%A0%E6%B3%95%E6%B3%A8%E5%85%A5%E5%8F%8A%E6%8C%81%E4%B9%85%E5%8C%96%E7%9A%84%E9%97%AE%E9%A2%98/" class="title">springboot&#43;quartz定时任务（解决无法注入bean及持久化的问题）</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-06-05 00:09:03 &#43;0800 CST" itemprop="datePublished">2020-06-05</time>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>
  </div>
</aside>

    
    
  <aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
    <div class="slimContent">
      <nav id="toc" class="article-toc">
        <h3 class="toc-title">文章目录</h3>
        <div class="toc-content always-active"><nav id="TableOfContents">
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#ionic4如何打包成andriod平台下的apk文件">ionic4如何打包成Andriod平台下的apk文件</a></li>
</ul></li>
</ul></li>
</ul></li>
</ul></li>
</ul>
</nav>
        </div>
      </nav>
    </div>
  </aside>
<main class="main" role="main"><div class="content">
  <article id="-" class="article article-type-" itemscope
    itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      <h1 itemprop="name">
  <a
    class="article-title"
    href="/blogs/1/01/%E5%89%8D%E7%AB%AFangular-ionic%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/"
    ></a
  >
</h1>

      <div class="article-meta">
        <span class="article-date">
  <i class="icon icon-calendar-check"></i>
<a href="https://seventeenw.gitee.io/blogs/1/01/%E5%89%8D%E7%AB%AFangular-ionic%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/" class="article-date">
  <time datetime="0001-01-01 00:00:00 &#43;0000 UTC" itemprop="datePublished">0001-01-01</time>
</a>
</span>

        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/blogs/1/01/%E5%89%8D%E7%AB%AFangular-ionic%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/#comments"
            class="article-comment-link">评论</a></span>
		<span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计:285字</span>
		<span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长:2分 </span>
      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      

<p>安装ionci环境：</p>

<pre><code>npm install -g @ionic/cli
</code></pre>

<p>查看ionic版本：</p>

<pre><code>ionic -v
</code></pre>

<p>新建app项目：</p>

<pre><code>ionic start myionictest blank（空项目）
ionic start myionictest tabs（带导航条）
ionic start myionictest sidemenu（带侧滑菜单）
</code></pre>

<p>启动app：</p>

<pre><code>cd myApp
ionic serve
</code></pre>

<p>创建：</p>

<pre><code>ionic g page YourPageName //创建新页面
ionic g directive YourPageName //创建指令
ionic g component YourComponentName //创建组件
ionic g provider YourProviderName //创建服务
ionic g pipe YourPipeName //创建过滤器
</code></pre>

<p>在指定目录下创建</p>

<pre><code>ionic g page [newPageName] --pagesDir [dirName]　　

例：ionic g page setting --pagesDir src/pages/about
</code></pre>

<p>后续操作：</p>

<pre><code>ionic platform add android（添加android平台）
ionic platform removeandroid（移除android平台）
ionic build android（编译项目apk）
ionic emulate android（运行项目apk手机连接在手机运行模拟器连接在模拟器运行）
ionic run android （相当于build + emulate）
ionic serve（开启服务调试）
ionic cordova build android –prod 加开App启动速度
</code></pre>

<p>打包命令：</p>

<pre><code>ionic package build ·············· 启动打包
ionic package download ·············· 下载已打包的app
ionic package info ·············· 查看包的信息
ionic package list ·············· 查看服务器上的包的列表
</code></pre>

<h5 id="ionic4如何打包成andriod平台下的apk文件">ionic4如何打包成Andriod平台下的apk文件</h5>

<blockquote>
<p>参考地址：<a href="https://blog.csdn.net/delicious_life/article/details/90712694">https://blog.csdn.net/delicious_life/article/details/90712694</a></p>

<p>构建安卓平台</p>

<pre><code>&gt; ionic cordova platform add android
&gt; ```
&gt;
&gt; 构建项目
&gt;
&gt; ```
&gt; ionic cordova build android
&gt; ```
&gt;
&gt; 移除android工程
&gt;
&gt; ```
&gt; ionic cordova platform remove android
&gt; ```



##### Ionic4—修改包名、APP名称、图标和启动画面

&gt; 参考地址：https://blog.csdn.net/weixin_42472040/article/details/103414209









页面跳转：

- 直接点击跳转页面

</code></pre>

<p><ion-button href="/test1">Button直接点击跳转页面</ion-button></p>

<pre><code>
- 自定义跳转

  tab1.page.html

</code></pre>

<p><ion-button (click)="goTest1()">自定义跳转</ion-button></p>

<pre><code>
  tab1.page.ts

  ![image-20200426113231963](前端angular+ionic常用命令/image-20200426113231963.png)





#### 设置沉浸式状态栏

platforms\android\app\src\main\java\org\apache\cordova\statusbar\StatusBar.java

</code></pre>

<p>@Override
    public void initialize(final CordovaInterface cordova, CordovaWebView webView) {
        LOG.v(TAG, &ldquo;StatusBar: initialization&rdquo;);
        super.initialize(cordova, webView);</p>
</blockquote>

<pre><code>    this.cordova.getActivity().runOnUiThread(new Runnable() {
        @Override
        public void run() {
            // Clear flag FLAG_FORCE_NOT_FULLSCREEN which is set initially
            // by the Cordova.
            Window window = cordova.getActivity().getWindow();

            // ==================== 添加内容start ====================
</code></pre>

<p>// /**
//  * 初始化状态栏相关，
//  * PS: 设置全屏需要在调用super.onCreate(arg0);之前设置setIsFullScreen(true);否则在Android 6.0下非全屏的activity会出错;
//  * SDK19：可以设置状态栏透明，但是半透明的SYSTEM_BAR_BACKGROUNDS会不好看；
//  * SDK21：可以设置状态栏颜色，并且可以清除SYSTEM_BAR_BACKGROUNDS，但是不能设置状态栏字体颜色（默认的白色字体在浅色背景下看不清楚）；
//  * SDK23：可以设置状态栏为浅色（SYSTEM_UI_FLAG_LIGHT_STATUS_BAR），字体就回反转为黑色。
//  * 为兼容目前效果，仅在SDK23才显示沉浸式。
//  */</p>

<p>// 透明状态栏
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 状态栏字体设置为深色，SYSTEM_UI_FLAG_LIGHT_STATUS_BAR 为SDK23增加
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);</p>

<p>// 透明导航栏（返回键、主页键、任务栏）
// window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);</p>

<p>// 部分机型的statusbar会有半透明的黑色背景
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);</p>

<p>// 设置状态栏颜色为透明
window.setStatusBarColor(Color.TRANSPARENT);
// 设置导航栏颜色为透明
// window.setNavigationBarColor(Color.TRANSPARENT);</p>

<p>// ==================== 添加内容end ====================</p>

<pre><code>
app.component.ts

</code></pre>

<p>initializeApp() {
    this.platform.ready().then(() =&gt; {
    // ==================== 添加内容start ====================
      this.statusBar.overlaysWebView(true);
      this.statusBar.styleDefault();
    // ==================== 添加内容end ====================<br />
      // this.statusBar.backgroundColorByHexString(&ldquo;#f8f8f8&rdquo;); //浅色背景
      this.splashScreen.hide();
    });
  }
```</p>

    </div>
  </article>
<section id="comments">
</section>

</div><nav class="bar bar-footer clearfix" data-stick-bottom>
    <div class="bar-inner">
        <ul class="pager pull-left">
            <li class="next">
                <a href="https://seventeenw.gitee.io/blogs/about/"
                    title="关于自己"><span>下一篇&nbsp;&nbsp;</span><i
                        class="icon icon-angle-right" aria-hidden="true"></i></a>
            </li>
            
            <li class="toggle-toc">
                <a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false"
                    title="文章目录" role="button">
                    <span>[&nbsp;</span><span>文章目录</span>
                    <i class="text-collapsed icon icon-anchor"></i>
                    <i class="text-in icon icon-close"></i>
                    <span>]</span>
                </a>
            </li>
        </ul>
        <div class="bar-right">
            <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter"
                data-mobile-sites="weibo,qq,qzone"></div>
        </div>
    </div>
</nav>
</main><footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
<ul class="social-links">
    <li><a href="https://github.com/wengshiquan" target="_blank" title="github" data-toggle=tooltip data-placement=top >
            <i class="icon icon-github"></i></a></li>
    <li><a href="https://seventeenw.gitee.io/index.xml" target="_blank" title="rss" data-toggle=tooltip data-placement=top >
            <i class="icon icon-rss"></i></a></li>
    <li><a href="https://gitee.com/seventeenw" target="_blank" title="tags" data-toggle=tooltip data-placement=top >
            <i class="icon icon-tags"></i></a></li>
</ul>
  <div class="copyright">
    &copy;2017  -
    2020
    <div class="publishby">
        Theme by <a href="https://github.com/xiaoheiAh" target="_blank"> xiaoheiAh </a>base on<a href="https://github.com/xiaoheiAh/hugo-theme-pure" target="_blank"> pure</a>.
    </div>
  </div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
   window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/highlight.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/rust.min.js"></script>
<script type="text/javascript"
   src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/dockerfile.min.js"></script>
<script>
hljs.configure({
  tabReplace: '    ', 
  classPrefix: ''     
                      
})
hljs.initHighlightingOnLoad();
</script>
<script type="text/javascript" src="https://seventeenw.gitee.io/blogs/js/application.js"></script>
<script type="text/javascript" src="https://seventeenw.gitee.io/blogs/js/plugin.js"></script>
<script>
      (function (window) {
          var INSIGHT_CONFIG = {
              TRANSLATION: {
                  POSTS: '文章',
                  PAGES: '页面',
                  CATEGORIES: '分类',
                  TAGS: '标签',
                  UNTITLED: '(未命名)',
              },
              ROOT_URL: 'https:\/\/seventeenw.gitee.io\/blogs',
              CONTENT_URL: 'https:\/\/seventeenw.gitee.io\/blogs\/searchindex.json ',
          };
          window.INSIGHT_CONFIG = INSIGHT_CONFIG;
      })(window);
      </script>
<script type="text/javascript" src="https://seventeenw.gitee.io/blogs/js/insight.js"></script>

  </body>
</html>
